<template>
  <div class="left-chart-3">
    <dv-border-box-13>
      <div class="lc3-header">蜂场列表</div>
      <dv-decoration-2 style="height:10px;" />
      <div style="margin-top: 10px;">
        <table class="P-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>蜂场名</th>
              <th>地址</th>
              <th>运营商</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>CUP</td>
              <td>遵义师范学院</td>
              <td>***</td>
            </tr>
            <tr>
              <td>2</td>
              <td>蜂场B</td>
              <td>某市某区</td>
              <td>运营商B</td>
            </tr>
            <tr>
              <td>3</td>
              <td>蜂场C</td>
              <td>某省某地</td>
              <td>运营商C</td>
            </tr>
            <tr>
              <td>4</td>
              <td>蜂场D</td>
              <td>某县某乡</td>
              <td>运营商D</td>
            </tr>
          </tbody>
        </table>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  name: 'LeftChart3',
  data () {
    return {
      config: {}
    }
  }
}
</script>

<style lang="less">
.left-chart-3 {
  width: 100%;
  height: 33%;
  display: flex;
  flex-direction: column;

  .lc3-header {
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    text-indent: 20px;
    font-weight: bold; /* 加粗 */
    color: rgb(81, 119, 243);
  }

  .P-table {
    width: 100%; /* 表格宽度 */
    height: 150px;
    border-collapse: collapse; /* 合并边框 */
    background-color: rgb(64, 67, 66); /* 表格背景颜色 */
    color: white; /* 表格文字颜色 */

    th {
      height: 40px; /* 表头高度 */
      background-color: rgb(77, 89, 143); /* 表头背景颜色 */
      color: white; /* 表头文字颜色 */
      text-align: center; /* 表头文本居中 */
    }

    td {
      height: 30px; /* 单元格高度 */
      text-align: center; /* 单元格文本居中 */
    }
  }
}
</style>
